<template>
  <div id="particles-bg"></div>
  <div class="center-card">
    <div class="card">
      <h1>登录失败，账户有误</h1>
      <router-link to="/login" class="btn">重新登录</router-link>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

// 初始化particlesJS
function initParticles() {
  if (typeof particlesJS !== 'undefined') {
    particlesJS("particles-bg", {
      "particles": {
        "number": { "value": 40, "density": { "enable": true, "value_area": 800 } },
        "color": { "value": "#ffffff" },
        "shape": { "type": "circle" },
        "opacity": { "value": 0.7, "random": true },
        "size": { "value": 8, "random": true },
        "move": {
          "enable": true,
          "speed": 1.5,
          "direction": "top",
          "straight": false,
          "out_mode": "out"
        }
      },
      "interactivity": {
        "events": {
          "onhover": { "enable": true, "mode": "bubble" },
          "onclick": { "enable": true, "mode": "repulse" }
        },
        "modes": {
          "bubble": { "distance": 120, "size": 12, "duration": 2, "opacity": 0.6 },
          "repulse": { "distance": 100, "duration": 0.4 }
        }
      },
      "retina_detect": true
    });
  }
}

// 组件挂载时初始化particles
onMounted(() => {
  // 延迟初始化，确保DOM已渲染
  setTimeout(() => {
    initParticles();
  }, 100);
});
</script>

<style scoped>
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

#particles-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #d6e0ff 0%, #e0c3fc 100%);
    z-index: -1;
    overflow: hidden;
}
.center-card {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.13);
    padding: 36px 30px 24px 30px;
    min-width: 320px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card h1 {
    color: #e74c3c;
    font-size: 22px;
    margin-bottom: 18px;
}
.btn {
    border: none;
    border-radius: 6px;
    padding: 10px 32px;
    background: linear-gradient(90deg, #b39ddb 0%, #a18cd1 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s, transform 0.1s;
    text-decoration: none;
    display: inline-block;
}
.btn:hover {
    background: linear-gradient(90deg, #a18cd1 0%, #b39ddb 100%);
    transform: translateY(-2px) scale(1.03);
}
</style>
